<!--
 * @author: 十一
 * @since: 2024-04-07
 * user-components.vue
 * @desc: new page
-->
<template>
  <a-drawer :title="title" width="500" placement="right" :closable="false" :open="open" @close="onClose">
    <a-form ref="formRef" :label-col="labelCol" :wrapper-col="wrapperCol">
      <a-form-item label="广告" name="avatar">
        <a-upload v-model:file-list="fileList" name="avatar" list-type="picture-card" class="avatar-uploader" :show-upload-list="false" :customRequest="uploadFile">
          <img v-if="imageUrl" :src="imageUrl" alt="avatar" />
          <div v-else>
            <loading-outlined v-if="loading"></loading-outlined>
            <plus-outlined v-else></plus-outlined>
            <div class="ant-upload-text">上传广告</div>
          </div>
        </a-upload>
      </a-form-item>
      <a-form-item label="广告排序" v-bind="validateInfos.sort">
        <a-input v-model:value="modelRef.sort" />
      </a-form-item>
      <a-form-item label="广告标题" v-bind="validateInfos.title">
        <a-input v-model:value="modelRef.title" />
      </a-form-item>

      <a-form-item label="广告类型">
        <a-select v-model:value="modelRef.type" placeholder="请选择广告类型">
          <a-select-option :value="item.code" v-for="item in AD_TYPE" :key="item.id">{{
            item.title
          }}</a-select-option>
        </a-select>
      </a-form-item>
      <a-form-item label="广告位置">
        <a-select v-model:value="modelRef.position" placeholder="请选择广告位置">
          <a-select-option :value="item.code" v-for="item in AD_POSITION" :key="item.id">{{
            item.title
          }}</a-select-option>
        </a-select>
      </a-form-item>
      <a-form-item label="广告状态">
        <a-select v-model:value="modelRef.status" placeholder="请选择广告状态">
          <a-select-option :value="item.code" v-for="item in AD_STATUS" :key="item.id">{{
            item.title
          }}</a-select-option>
        </a-select>
      </a-form-item>
      <a-form-item label="外链" v-bind="validateInfos.link">
        <a-input v-model:value="modelRef.link" />
      </a-form-item>
      <a-form-item label="背景颜色" v-bind="validateInfos.bg_color">
        <a-input v-model:value="modelRef.bg_color" />
      </a-form-item>
      <a-form-item label="描述" v-bind="validateInfos.description">
        <a-input v-model:value="modelRef.description" />
      </a-form-item>
      <a-form-item class="error-infos" :wrapper-col="{ offset: 6, span: 18 }">
        <a-button type="primary" @click.prevent="onSubmit">提交</a-button>
      </a-form-item>
    </a-form>
  </a-drawer>
</template>

<script lang="ts" setup>
import { ref, reactive, toRaw } from 'vue'
import { Form } from 'ant-design-vue'
import { DataEcho } from '@/utils/dataEcho'
import { editAd, addAd, uploadFiles } from '@/servers/main'
import { message } from 'ant-design-vue'
import { useDictionaryStore } from '@/stores/useDictionaryStore'
import { formatDictionaryList } from '@/utils/common'

// 表单
const { dictionary } = useDictionaryStore()
const useForm = Form.useForm
const formRef = ref()
const labelCol = { span: 6 }
const wrapperCol = { span: 18 }
let modelRef = reactive({
  id: '',
  url: '',
  title: '',
  sort: 0,
  type: 0,
  position: 0,
  status: 0,
  link: '',
  bg_color: '',
  description: ''
})
const rulesRef = reactive({
  nickname: [
    {
      required: true,
      message: '昵称不能为空'
    }
  ],
  email: [
    {
      required: true,
      message: '手机号不能为空'
    }
  ]
})
const AD_TYPE = formatDictionaryList(dictionary, 'AD_TYPE')
const AD_POSITION = formatDictionaryList(dictionary, 'AD_POSITION')
const AD_STATUS = formatDictionaryList(dictionary, 'AD_STATUS')

const { resetFields, validate, validateInfos } = useForm(modelRef, rulesRef)
const onSubmit = () => {
  validate()
    .then(() => {
      if (state.value == 1) {
        editAd(toRaw(modelRef)).then((response: any) => {
          console.log(response)
          if (response.code === 200) {
            emit('childGetData')
            message.success(response.message)
            onClose()
          } else {
            message.error(response.message)
          }
        })
      } else {
        addAd(toRaw(modelRef)).then((response: any) => {
          console.log(response)
          if (response.code === 200) {
            emit('childGetData')
            message.success(response.message)
            onClose()
          } else {
            message.error(response.message)
          }
        })
      }
    })
    .catch((err) => {
      console.log('error', err)
    })
}
// 上传
const fileList = ref([])
const loading = ref<boolean>(false)
const imageUrl = ref<string>('')

const uploadFile = (file: any) => {
  console.log(file)
  let formData = new FormData()
  formData.append('file', file.file)
  uploadFiles(formData).then((response: any) => {
    console.log(response)
    imageUrl.value = response.result
    modelRef.url = response.result
  })
}
// 遮罩
const open = ref(false)
const title = ref('新增')
const state = ref(0)
const showDrawer = (data: any) => {
  title.value = data.title
  open.value = true
  state.value = data.state
  resetFields()
  if (data.state == 1) {
    DataEcho(modelRef, data.options)
    imageUrl.value = data.options.url
  } else {
    imageUrl.value = ''
  }
}
const onClose = () => {
  resetFields()
  title.value = '新增'
  open.value = false
}
const emit = defineEmits(['childGetData'])

defineExpose({ showDrawer })
</script>

<style lang="less" scoped>
:deep .ant-row {
  align-items: center;
}
</style>
